<template>
  <el-row style="height:100%;margin-top:10px">
    <div class="top10">
      <div class="projectIndexTitle" style="margin-left:-20px">
        <div class="projectIndexSquare"></div>
        <label class="projectIndexInfo">项目金额TOP10</label>
      </div>
      <!-- <el-row type="flex" align="middle" class="top10Title">
        <el-col :span="2">
          <div style="background-color:green;height:2vh;width:10px;border-radius:5px;"></div>
        </el-col>
        <el-col :span="20">项目金额TOP10</el-col>
        <el-col :span="2"> -->
      <!-- <component-Setting :id="recordId" :position="'2'"></component-Setting> -->
      <!-- </el-col>
      </el-row> -->
      <!-- <el-row class="dataTitleForTop10">
        <el-col :span="3">
          <el-row type="flex" justify="center" class="top10Label">排名</el-row>
        </el-col>
        <el-col :span="5">
          <el-row type="flex" justify="center" class="top10Label">姓名</el-row>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="center" class="top10Label">金额/元</el-row>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="center" class="top10Label">数量</el-row>
        </el-col>
      </el-row>
      <el-row class="dataRowForTop10" v-for="(item , index) in top10Info" :key="item.areamanagerCode">
        <el-col :span="3">
          <el-row type="flex" justify="center" class="top10Content">
            <img v-if="index<=2" style="height:1.8vh;width:1.8vh" :src="'/static/images/paojectManager/medal'+(index+1)+'.png'" />
            <span v-else>{{index+1}}</span>
          </el-row>
        </el-col>
        <el-col :span="5">
          <el-row type="flex" justify="center" class="top10Content">{{item.projectmanager}}</el-row>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="center" class="top10Content">{{item.summoney}}</el-row>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="center" class="top10Content">{{item.projectcount}}</el-row>
        </el-col>
      </el-row> -->
      <el-table class="topTable" :data="top10Info" stripe style="width: 100%;" size="mini" :cell-style="{ padding: '0px', 'font-size': '12px' }" :header-row-style="{ 'font-size': '12px' }">
        <el-table-column prop="date" label="排名" min-width="50" align="center">
          <template slot-scope="scope">
            <img v-if="scope.$index <= 2" style="height:16px;width:16px" :src="'/static/images/paojectManager/medal' + (scope.$index + 1) + '.png'" />
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectmanager" align="center" min-width="70" label="姓名"> </el-table-column>
        <el-table-column prop="summoney" min-width="78" align="right"  label="金额(万元)"> </el-table-column>
        <el-table-column prop="projectcount" align="center" width="48" label="数量"> </el-table-column>
      </el-table>
    </div>
  </el-row>
</template>

<script>
import store from '@tapui/store'
import { getAction } from '@tapui/utils/http'
import componentSetting from './componentSetting'
export default {
  components: { componentSetting },
  name: 'peojectMoneyTOP10',
  data() {
    return {
      top10Info: []
    }
  },
  props: {
    recordId: Number
  },
  methods: {
    getTop10Info(queryParam) {
      getAction('/mpm/mpmIndex/getMoneyTop10', queryParam).then((res) => {
        if (res.success) {
          this.top10Info = res.result
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    }
  },
  created() {
    this.getTop10Info()
  },
  mounted() {},
  beforeDestroy() {}
}
</script>

<style lang="scss" scoped>
.dataTitleForTop10 {
  margin-top: 1.5vh;
  // color: #8fafc0;
  height: 18px;
}
.dataChunkBigTile {
  bottom: 5px;
  color: black;
  font-size: 2.2vh;
}
.top10Label {
  font-size: 1.2vh;
  margin-bottom: 15px;
  text-align: center;
}
.dataChunkTile {
  font-size: 1.5vh;
  margin-bottom: 15px;
}
.dataChunkValue {
  font-size: 2vh;
  color: #0a966e;
}
.dataRow {
  margin-top: 2vh;
}
.app-main {
  height: 100%;
  width: 100%;
}
.topCol {
  height: 100%;
  color: #8fafc0;
  text-align: center;
  padding-top: 1.5%;
}
.topRow {
  height: 10%;
}
.dataCenter {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.projectState {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top10 {
  height: 100%;
  background-size: 100% 100%;
  padding: 0 20px 20px 20px;
  background-color: white;
  border-radius: 10px;
}
.oneYearData {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.el-scrollbar__view {
  height: 98%;
  width: 100%;
}
#echartsContainer {
  width: 100%;
  height: 100%;
  margin-bottom: 8px;
  /* border: 1px solid #ddd; */
}
.row {
  margin-top: 10px;
}
.dataRowForTop10 {
  margin-top: 1.2vh;
}
.top10Content {
  font-size: 1.2vh;
  color: #8fafc0;
  text-align: left;
}
.top10Title {
  font-size: 2.2vh;
  color: black;
}
.timeFlagGroup {
  margin-top: 2vh;
}
.buttonBgColor {
  background-color: #042e50;
}
@media screen and (max-width: 1920px) {
  .dataRow {
    margin-top: 5px;
    // color: #8fafc0;
  }
  .dataRowForTop10 {
    margin-top: 8px;
    // color: #8fafc0;
  }
}
.topTable {
  // 控制边框
  /deep/ .el-table__header-wrapper .el-table__header {
    border: none;
  }
  /deep/ .el-table__body-wrapper .el-table__body {
    border: none;
  }
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 7px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(144, 147, 153, 0.3);
  }
  /deep/ .el-table__fixed-right {
    height: 100% !important;
  }
  /deep/ .el-table__body-wrapper {
    cursor: pointer;
  }
}
</style>
